<!--上面的状态栏-->
<script setup lang="ts">
import MessageList from "@/components/widgets/messageList/messageList.vue";
import {ref} from "vue";

//用来把messageBtn传过去用于MessageList判断是否ClickAway
const messageBtnRef = ref<Document | null>(null)
//用于调用MessageList暴露的方法
const messageListRef = ref<Document | null>(null)

//

</script>
<template>
  <div class="status-bar">
    <div class="left-bar"></div>
    <div class="right-bar">
      <!-- 消息列表-->
      <div class="item-func" @click="messageListRef.handlerMessageList()" ref="messageBtnRef">
        <div class="material-icons icon">sms</div>
      </div>
      <!--用户-->
      <div class="item-func">
        <div class="material-icons icon">account_circle</div>
      </div>
    </div>
    <!-- 消息列表-->
    <MessageList :btn-dom="messageBtnRef" ref="messageListRef"></MessageList>
  </div>

</template>
<style lang="less" scoped>
.status-bar {
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(15px);
  box-shadow: -2px -1px 7px rgb(0 0 0 / 40%);
  z-index: 100;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;

  .left-bar {

  }

  .right-bar {
    display: flex;
    align-items: center;

    .item-func {
      user-select: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      height: 30px;
      width: 40px;
      justify-content: center;

      .icon {
        font-weight: 300;
        font-size: 22px;
        height: 30px;
        line-height: 30px;
      }
    }

    .item-func:hover {
      background-color: rgba(255, 255, 255, 0.4);
    }

    .item-func:active {
      background-color: rgba(0, 0, 0, 0.1);
    }
  }
}
</style>
